<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		<view class="box margin0 flex-between flex-wrap">
			<view class="margin0 w100">
				<view class="case" v-for="(item, index) in list" :key="index" @click.stop="toContrast(item.videoUrl, item.uploadVideoUrl)">
					<view class="w100 flex-between">
						<view class="caseimg">
							<view class="name">原视频</view>
							<image :src="item.uploadVideoUrl+'?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,ar_auto'" mode="aspectFill"></image>
						</view>
						<view class="caseimg">
							<view class="name">AI视频</view>
							<image :src="item.videoUrl+'?x-oss-process=video/snapshot,t_1,f_jpg,m_fast,ar_auto'" mode="aspectFill"></image>
						</view>
					</view>
					<view class="botVue">{{item.name}}</view>
				</view>
        <view class="w100 flex-column align-center padding-column20" v-if="isEmpty">
          <image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png" style="width: 256rpx; height: 256rpx;"></image>
          <text style="color: #81868e;">暂无用户案例</text>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [],
				pageNum: 0,
				pageSize: 10,
				isLastPage: false,
        isEmpty:false
			}
		},
		async onLoad() {
			await this.getList()
		},

		onReachBottom() {
			console.log("ppp", this.isLastPage)
			if(this.isLastPage) return
			this.pageNum ++
			this.getList()
		},

		methods: {
			// 获取用户案例
			async getList(){
				const res = await this.$request("/shuziren/userVideo/public", {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, "GET")
				if(res.code===200) {
					this.list = this.list.concat(res.data.content)
					this.isLastPage = res.data.page.number === res.data.page.totalPages - 1
          this.isEmpty = this.list.length === 0
        }else {
          this.isEmpty = true
        }
			},
			toContrast(videoUrl, uploadVideoUrl){
				uni.navigateTo({
					url: `../mine/contrast?videoUrl=${videoUrl}&&uploadVideoUrl=${uploadVideoUrl}`
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 690rpx;
		.case {
			width: 100%;
			height: 415rpx;
			margin-bottom: 20rpx;
			.botVue {
				width: 100%;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 0 0 20rpx 20rpx;
				text-align: center;
				line-height: 80rpx;
				color: #333;
			}
			.caseimg {
				width: 335rpx;
				height: 335rpx;
				position: relative;
				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0 0;
				}
				.name {
					width: 120rpx;
					height: 46rpx;
					background: rgba(0,0,0,0.4);
					border-radius: 19rpx;
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					bottom: 20rpx;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					line-height: 46rpx;
				}
			}
		}
	}
</style>
